<!-- main -->
<div class="row">
    <div class="col-sm-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <div class="box-title">
                    <button class="btn btn-primary" (click)="toggleModel('addModel')">新增</button>
                    <button class="btn btn-danger" (click)="delUsers()">删除</button>
                </div>
            </div>
            <!-- 搜索框 -->
            <div class="box-header">
                <form class="form-inline">
                    <div class="form-group search-input-R2">
                        <label for="SuserId">ID</label>
                        <input type="text" id="SuserId" class="form-control" placeholder="学号/工号/系统号" [(ngModel)]="searchBody.UserId" name="SuserId">
                    </div>
                    <div class="form-group search-input-R2">
                        <label for="Srole">权限</label>
                        <select class="form-control" id="Srole" [(ngModel)]="searchBody.Role" name="Srole">
                        <option value="user">user</option>
                        <option value="teach">teach</option>
                        <option value="admin">admin</option>
                    </select>
                    </div>
                    <div class="form-group search-input-R2">
                        <button type="submit" (click)="getUserList(1)" class="btn btn-primary btn-margin-right">查询</button>
                        <button type="submit" (click)="clearSearch()" class="btn btn-warning">重置</button>
                    </div>
                </form>
            </div>
            <!-- table -->
            <div class="box-body table-scroll-content">
                <table id="userTable" class="table table-bordered table-hover table-striped table-keep-line">
                    <thead>
                        <tr>
                            <th>
                                <div class="checkbox checkbox-primary">
                                    <input type="checkbox" name="checkall" [(ngModel)]="checkall" (ngModelChange)="checkAll()"><label></label>
                                </div>
                            </th>
                            <th>权限</th>
                            <th>ID</th>
                            <th>密码</th>
                            <th>姓名</th>
                            <th>创建时间</th>
                            <th>最近登录时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let user of userList">
                            <td>
                                <div class="checkbox checkbox-primary">
                                    <input type="checkbox" name="checkbox" [(ngModel)]="user.isChecked"><label></label>
                                </div>
                            </td>
                            <td>{{user.Role}}</td>
                            <td>{{user.UserId}}</td>
                            <td>{{user.PassWord}}</td>
                            <td>{{user.UserName}}</td>
                            <td>{{user.createdAt}}</td>
                            <td>{{user.updatedAt}}</td>
                            <td>
                                <button class="btn btn-xs btn-primary" (click)="toggleModel('editModel',user)">编辑</button>
                                <button class="btn btn-xs btn-danger" (click)="delUser(user)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 底部页面跳转 -->
            <div class="box-footer clearfix">
                <p class="pull-left">每页
                    <select [(ngModel)]="searchBody.PageSize" (ngModelChange)="getUserList(1)" name="pagesize">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                </select>个 - 共{{searchBody.Total}}个 - 当前显示第{{searchBody.PageIndex}}页
                </p>
                <ul class="pagination pagination-sm no-margin pull-right">
                    <li (click)="changePage('first',null)"><a>首页</a></li>
                    <li (click)="changePage('pre',null)"><a class="fa fa-chevron-left"></a></li>
                    <li *ngFor="let item of pages" (click)="changePage('page',item)" [class.active]="searchBody.PageIndex===item"><a>{{item}}</a></li>
                    <li (click)="changePage('next',null)"><a class="fa fa-chevron-right"></a></li>
                    <li (click)="changePage('last',null)"><a>末页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 新增模版 -->
<div class="modal fade" id="addModel" tabindex="-1" role="dialog" aria-labelledby="新增">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-sm-12">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline" #addForm="ngForm">
                    <div class="form-group add-input col-sm-6">
                        <label for="Arole">权限</label>
                        <select class="form-control" id="Arole" [(ngModel)]="addUserModel.Role" name="Arole" required>
                    <option value="user">user</option>
                    <option value="teach">teach</option>
                    <option value="admin">admin</option>
                </select>
                    </div>
                    <div class="form-group add-input col-sm-6">
                        <label for="AuserId">ID</label>
                        <input type="text" class="form-control" id="AuserId" placeholder="学号/工号/系统号" required [(ngModel)]="addUserModel.UserId" name="AuserId">
                    </div>
                    <div class="form-group add-input col-sm-6">
                        <label for="ApassWord">密码</label>
                        <input type="text" class="form-control" id="ApassWord" placeholder="密码" required [(ngModel)]="addUserModel.PassWord" name="ApassWord">
                    </div>
                    <div class="form-group add-input col-sm-6">
                        <label for="AuserName">姓名</label>
                        <input type="text" class="form-control" id="AuserName" placeholder="姓名" required [(ngModel)]="addUserModel.UserName" name="AuserName">
                    </div>
                </form>
            </div>
            <div class="modal-footer col-sm-12">
                <button type="button" class="btn btn-warning pull-left" (click)="clearAddModel()">重置</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" (click)="addUser()" [disabled]="!addForm.form.valid">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑模版 -->
<div class="modal fade" id="editModel" tabindex="-2" role="dialog" aria-labelledby="编辑">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-sm-12">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline" #editForm="ngForm">
                    <div class="form-group edit-input col-sm-6">
                        <label for="Erole">权限</label>
                        <select class="form-control" id="Erole" [(ngModel)]="editUserModel.Role" name="Erole">
                        <option value="user">user</option>
                        <option value="teach">teach</option>
                        <option value="admin">admin</option>
                    </select>
                    </div>

                    <div class="form-group edit-input col-sm-6">
                        <label for="EuserId">ID</label>
                        <input type="text" class="form-control" id="EuserId" placeholder="学号/工号/系统号" required [(ngModel)]="editUserModel.UserId"
                            name="EuserId">
                    </div>
                    <div class="form-group edit-input col-sm-6">
                        <label for="EpassWord">密码</label>
                        <input type="text" class="form-control" id="EpassWord" placeholder="密码" required [(ngModel)]="editUserModel.PassWord" name="EpassWord">
                    </div>
                    <div class="form-group edit-input col-sm-6">
                        <label for="EuserName">姓名</label>
                        <input type="text" class="form-control" id="EuserName" placeholder="姓名" required [(ngModel)]="editUserModel.UserName" name="EuserName">
                    </div>
                </form>
            </div>
            <div class="modal-footer col-sm-12">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" (click)="editUser()" [disabled]="!editForm.form.valid">确认</button>
            </div>
        </div>
    </div>
</div>